// toolbar工具栏的工具选项（默认展示全部）
const toolOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'script': 'sub' }, { 'script': 'super' }],
  [{ 'indent': '-1' }, { 'indent': '+1' }],
  [{ 'direction': 'rtl' }],
  [{ 'size': ['small', false, 'large', 'huge'] }],
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'font': [] }],
  [{ 'align': [] }],
  [{ 'clean': '源码编辑' }],
  ['link', 'image', 'video'],
  ['sourceEditor'] // 新添加的工具
];

const handlers = {
  shadeBox: null,
  sourceEditor: function() {
    const reg = /\<br\>/g,
      container = this.container,
      firstChild = container.nextElementSibling.firstChild;
    if (!this.shadeBox) {
      const shadeBox = this.shadeBox = document.createElement('div');
      shadeBox.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); cursor:pointer';
      container.style.position = 'relative';
      shadeBox.addEventListener('click', function() {
        this.style.display = 'none';
        firstChild.innerHTML = firstChild.innerText.trim();
      }, false);
      container.appendChild(shadeBox);
      let innerHTML = firstChild.innerHTML;
      innerHTML = innerHTML.replace(reg, '');
      firstChild.innerText = innerHTML;
    } else {
      let innerHTML = firstChild.innerHTML;
      innerHTML = innerHTML.replace(reg, '');
      firstChild.innerText = innerHTML;
      this.shadeBox.style.display = 'block';
    }
  }
};

export default {
  placeholder: '',
  theme: 'snow',  // 主题
  modules: {
    toolbar: {
      container: toolOptions,  // 工具栏选项
      handlers: handlers  // 事件重写
    }
  },
  initButton: function (index) {
    const sourceEditorButton = document.querySelector(`#editor${index} .ql-sourceEditor`);
    // console.log('ql', sourceEditorButton, index)
    sourceEditorButton.style.cssText = 'font-size:18px';
    // sourceEditorButton.style.cssText = "width:80px; border:1px solid #ccc; border-radius:5px;"
    sourceEditorButton.classList.add('el-icon-edit-outline');
    // 鼠标放上去显示的提示文字
    sourceEditorButton.title = '源码编辑';
  },
  register(q) {
    // 注册标签(因为在富文本编辑器中是没有div,table等标签的，需要自己去注册自己需要的标签)
    class div extends q.import('blots/block/embed') {}
    class table extends q.import('blots/block/embed') {}
    class tr extends q.import('blots/block/embed') {}
    class td extends q.import('blots/block/embed') {}
    class br extends q.import('blots/block/embed') {}
    class section extends q.import('blots/block/embed') {}
    class footer extends q.import('blots/block/embed') {}
    class header extends q.import('blots/block/embed') {}
    class span extends q.import('blots/block/embed') {}
    class strong extends q.import('blots/block/embed') {}
    div.blotName = div.tagName = 'div';
    table.blotName = table.tagName = 'table';
    tr.blotName = tr.tagName = 'tr';
    td.blotName = td.tagName = 'td';
    span.blotName = span.tagName = 'span';
    br.blotName = br.tagName = 'br';
    section.blotName = section.tagName = 'section';
    footer.blotName = footer.tagName = 'footer';
    header.blotName = header.tagName = 'header';
    strong.blotName = strong.tagName = 'strong';
    q.register(div);
    q.register(table);
    q.register(tr);
    q.register(td);
    q.register(section);
    q.register(br);
    q.register(footer);
    q.register(header);
    q.register(span);
    q.register(strong);
  }
};
